<template>
  <div class="goods_list">
    <div class="SearchBox">
      <van-search
        v-model="value"
        shape="round"
        background="#e93323"
        placeholder="搜索商品信息"
        show-action
        @search="onSearch(params)"
      >
        <template #action>
          <div @click="arrange">
            <van-icon
              name="bar-chart-o"
              v-if="!arrangement"
              color="white"
              size="0.6rem"
            />
            <van-icon name="qr" color="white" size="0.6rem" v-else />
          </div>
        </template>
      </van-search>
    </div>
    <div class="nav">
      <ul>
        <li @click="ToCategory">{{ $route.query.title || "默认" }}</li>
        <li @click="screen('price')">
          价格
          <img :src="imgSrc[status.price.num]" alt="" />
        </li>
        <li @click="screen('sales')">
          销量
          <img :src="imgSrc[status.sales.num]" alt="" />
        </li>
        <li
          @click="screen('spec_type')"
          :style="`color:${status.spec_type.num == 0 ? 'black' : 'red'}`"
        >
          新品
        </li>
      </ul>
    </div>
    <template v-if="!Searing">
      <template v-if="goodslist && goodslist.length != 0">
        <div :class="{ goods_heng: true, goods_fang: !arrangement }">
          <router-link
            :to="'/detail?id=' + item.id"
            v-for="item in goodslist"
            :key="item.id"
          >
            <van-card :thumb="item.image">
              <template #title>
                <div class="top">
                  <span class="title">{{ item.store_name }}</span>
                  <span class="price">￥{{ item.price }}</span>
                </div>
              </template>
              <template #price>
                <span class="vip">￥{{ item.vip_price }}</span>
                <i class="vip_icon"></i>
              </template>
              <template #num>
                <span class="soldout">已售{{ item.sales }}件</span>
              </template>
            </van-card>
          </router-link>
        </div>
        <!-- <div class="goods_fang goods_heng" >
        <router-link
          :to="'/detail?id=' + item.id"
          v-for="item in goodslist"
          :key="item.id"
        >
          <van-card :thumb="item.image">
            <template #title>
              <div class="top">
                <span class="title">{{ item.store_name }}</span>
                <span class="price">￥{{ item.price }}</span>
              </div>
            </template>
            <template #price>
              <span class="vip">￥{{ item.vip_price }}</span>
              <i class="vip_icon"></i>
            </template>
            <template #num>
              <span class="soldout">已售{{ item.sales }}件</span>
            </template>
          </van-card>
        </router-link>
      </div> -->
      </template>
      <template v-else>
        <div class="empty">
          <van-empty
            class="custom-image"
            image="http://47.115.51.185/h5/img/noGood.7aec7edd.png"
          />
          <RecommendForYou></RecommendForYou>
        </div>
      </template>
    </template>
    <template v-else>
      <van-loading size="24px" vertical>加载中...</van-loading>
    </template>
  </div>
</template>

<script>
import RecommendForYou from "@/components/RecommendForYou";
export default {
  components: {
    RecommendForYou,
  },
  created() {
    document.title = this.$route.query.title || "商品列表";
    if(this.$route.query.s){
      this.value = this.$route.query.s
      this.onSearch(this.params)
      this.value = '';
      return;
    }
    this.onSearch(this.params)
  },
  data() {
    return {
      goodslist: null,
      resultList: null,
      value: "",
      arrangement: false,
      params: {
        spec_type: "",
        price: "",
        sales: "",
      },
      status: {
        price: {
          num: 0,
        },
        sales: {
          num: 0,
        },
        spec_type: {
          num: 0,
        },
      },
      imgSrc: [
        "",
        "",
        "",
      ],
      Searing: false,
    };
  },
  methods: {
    arrange() {
      this.arrangement = !this.arrangement;
    },
    onSearch(params) {
      this.Searing = true;
      this.axios
        .get(
          `/api/products?page=1&limit=8&keyword=${this.value}&sid=${this.$route.query.id?this.$route.query.id:''}&news=${params.spec_type}&priceOrder=${params.price}&salesOrder=${params.sales}`
        )
        .then((response) => {
          this.Searing = false;
          this.goodslist = response.data.data;
          this.resultList = JSON.stringify(this.goodslist);
        });
    },
    ToCategory() {
      this.$router.push({
        path: "/category",
      });
    },
    getGoodsList(params) {
      this.Searing = true;
      this.axios
        .get(
          `/api/products?page=1&limit=8&keyword=&sid=${this.$route.query.id?this.$route.query.id:''}&news=${params.spec_type}&priceOrder=${params.price}&salesOrder=${params.sales}`
        )
        .then((response) => {
          this.Searing = false;
          this.goodslist = response.data.data;
          this.resultList = JSON.stringify(this.goodslist);
        });
    },
    screen(types) {
      for(var k in this.status){
        if(k != types){
          this.status[k].num = 0
        }
      }
      this.status[types].num++;
      if (types == "price" || types == "sales") {
        this.status[types].num > 2 ? (this.status[types].num = 0) : "";
      } else {
        this.status[types].num > 1 ? (this.status[types].num = 0) : "";
      }
      function asc(property) {
        return function (a, b) {
          return a[property] - b[property];
        };
      }
      function desc(property) {
        return function (a, b) {
          return b[property] - a[property];
        };
      }
      if (types == "price" || types == "sales") {
        if (this.status[types].num == 1) {
          this.goodslist.sort(asc(types));
        } else if (this.status[types].num == 2) {
          this.goodslist.sort(desc(types));
        } else {
           this.goodslist = JSON.parse(this.resultList);
        }
      } else {
        if (this.status[types].num == 1) {
          this.goodslist.sort(desc(types));
        } else {
          this.goodslist = JSON.parse(this.resultList);
        }
      }
    },
  },
};
</script>

<style lang="less">
.goods_list {
  width: 100%;
  background-color: #f5f5f5;
  height: 100vh;
  .SearchBox {
    width: 100%;
    .van-search--show-action {
      .van-search__action:active {
        background-color: transparent;
      }
      .van-icon {
        vertical-align: bottom;
        transform: rotateZ(90deg);
      }
    }
  }
  .nav {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #f9f9f9;
    background-color: #fff;
    > ul {
      width: 100%;
      height: 100%;
      display: flex;
      > li {
        flex: 1;
        height: 100%;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        img {
          width: 7.5px;
          height: 9.5px;
          margin-left: 3px;
        }
        &:nth-of-type(1) {
          color: red;
        }
      }
    }
  }
  .empty {
    width: 100%;
    .van-empty {
      width: 100%;
      background-color: #fff;
      .van-empty__image {
        width: 207px;
        height: auto;
      }
    }
    .recommend {
      // padding: 0 15px;
    }
  }
  .goods_heng {
    width: 100%;
    .van-card {
      background-color: #fff;
      .van-card__thumb {
        margin-right: 0;
        .van-image__error,
        .van-image__img,
        .van-image__loading {
          width: auto;
          height: 90%;
        }
      }
      .van-card__content {
        > div {
          &:nth-of-type(1) {
            flex: 1;
            .top {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .title {
                width: 100%;
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .price {
                font-weight: bold;
                font-size: 15px;
                color: red;
              }
              .promotionprice {
                color: white;
                background-color: #ff4020;
                padding: 5px 10px;
                border-radius: 12px 0 12px 0;
              }
            }
          }
        }
        .van-card__bottom {
          height: 0.6rem;
          line-height: normal;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .van-card__price {
            font-size: 12px;
            .vip {
              font-weight: bold;
            }
            .vip_icon {
              width: 23px;
              height: 10px;
              display: inline-block;
              background-image: url();
              background-size: cover;
              margin: 0 10px 0 5px;
            }
            .soldout {
              color: #aab2c8;
            }
            .regulat {
              color: #999999;
            }
          }
        }
      }
    }
    .van-card:not(:first-child) {
      margin-top: 0;
    }
  }
  .goods_fang {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    a {
      width: calc((100% - 10px) / 2);
      margin-bottom: 10px;
      border-radius: 8px;
      &:nth-of-type(2n-1) {
        margin-right: 10px;
      }
      .van-card {
        width: 100%;
        border-radius: 8px;
        .van-card__header {
          display: flex;
          flex-direction: column;
          .van-card__thumb {
            width: 100%;
            height: auto;
            .van-image {
              display: flex;
              justify-content: center;
              img {
                width: 150px;
                height: 150px;
              }
            }
          }
          .van-card__content {
            min-height: auto;
            height: 60px;
            .top {
              .price {
                margin-top: 5px;
              }
            }
            .soldout {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .van-card__price {
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
</style>